<template>
  <div class="mainContent">
    <el-row>
      <el-col :span="6" v-for="(item, i) in 3" :key="i">
        <el-card class="box-card">
        <el-row>
          <div style="float:left;font-size:16px;font-weight:bold">订单量</div>
          <div style="float:right">
          <el-button  type="text">今</el-button>
          <el-button  type="text">周</el-button>
          <el-button  type="text">月</el-button>
          <el-button  type="text">年</el-button>
          </div>
        </el-row>
         <div>
            100
        </div>
      </el-card>
      </el-col>
    </el-row>
    <el-card style="margin-top:10px">
      <div id="myChart" :style="{height: '300px'}"></div>
    </el-card>
    <el-row style="margin-top:20px;display: flex;justify-content:center">
      <el-col :span="10" style="margin-right:2px">
      <el-card>
         <div style="float:left;font-size:16px;font-weight:bold">热门景区</div>
          <div style="float:right">
          <el-button  type="text">今</el-button>
          <el-button  type="text">周</el-button>
          <el-button  type="text">月</el-button>
          <el-button  type="text">年</el-button>
          </div>
          <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
      </el-card>
      </el-col>
    <el-col span="10" style="margin-left:2px">
      <el-card>
         <div style="float:left;font-size:16px;font-weight:bold">销量分布</div>
          <div style="float:right">
          <el-button  type="text">今</el-button>
          <el-button  type="text">周</el-button>
          <el-button  type="text">月</el-button>
          <el-button  type="text">年</el-button>
          </div>
          <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
      </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '订单量走势图'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }]
      })
    }
  }
}
</script>

<style lang="scss"  scoped>
.mainContent{
  padding: 20px;
}
.box-card{
  margin-right:3px
}
.clearfix{
   display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/deep/ .el-button{
  padding: 0;
}
</style>
